<template>
  <div class="form">
    <search-header>
      <template v-slot:left>
        <van-icon name="arrow-left" color="#aaa9a9" @click="goBack" />
      </template>
      <template v-slot:mid>
        <div class="search">
          <span class="icon fa fa-search"></span>
          <input
            ref="input"
            type="text"
            placeholder="请输入菜名或者食材搜索"
            class="search-inp"
            v-model="sName"
          />
        </div>
      </template>
      <template v-slot:right>
        <button class="text" @click="search">搜索</button>
      </template>
    </search-header>
    <div class="rlist">
      <div class="content-box">
        <!-- <comp-result-item v-for="item in fakData" :key="item.id">
          <div class="resItem" @click="showDesc">
            <img :src="item.pic" alt="" />
            <div>
              <h4>{{ item.name }}</h4>
              <div class="introd">
                <p class="num">准备时长:{{ item.preparetime }}</p>
                <p class="time">亨饪时长：{{ item.cookingtime }}</p>
              </div>
            </div>
          </div>
        </comp-result-item> -->

        <van-list
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <comp-result-item
            v-for="(item, index) in list"
            :key="item.id + index + item.name"
          >
            <div class="resItem" @click="showDesc(item.id)">
              <img :src="item.pic" alt="" />
              <div>
                <h4>{{ item.name }}</h4>
                <div class="introd">
                  <p class="num">准备时长:{{ item.preparetime }}</p>
                  <p class="time">亨饪时长：{{ item.cookingtime }}</p>
                </div>
              </div>
            </div>
          </comp-result-item>
        </van-list>
        <!-- <comp-list :menulist="list"></comp-list> -->
      </div>
    </div>
  </div>
</template>

<script>
import CompResultItem from "@/components/comp-resultItem.vue";
import SearchHeader from "../components/search-header.vue";
import CompList from "../components/comp-list.vue";
export default {
  name: "pageResult",
  components: {
    CompResultItem,
    SearchHeader,
    CompList,
  },
  props: {},
  data() {
    return {
      loading: false,
      finished: false,
      sName: "",
      list: [],
      page: 0,
      histlist: [],
    };
  },
  watch: {},
  methods: {
    initData() {
      axios
        .get(
          `/search?keyword=${this.sName}&num=10&start=${this.page}&appkey=d9c770661cb89052d8785cadce76e57a`
        )
        .then((response) => {
          if (response.data.code == 10000) {
            let res = response.data.result.result.list;
            if (res == undefined) {
              return false;
            }
            this.list = res;
            // this.histlist = [...this.histlist, this.sName];
            localStorage.setItem("historylist", JSON.stringify(this.histlist));
          }
        });
    },
    onLoad() {
      this.page++;
      this.loading = true;
      let pro = axios.get(
        `/search?keyword=${this.sName}&num=10&start=${this.page}&appkey=d9c770661cb89052d8785cadce76e57a`
      );
      pro.then((response) => {
        if (response.data.code == 10000) {
          let res = response.data.result.result.list;
          if (res == undefined) {
            return false;
          }
          if (res.length == 0) {
            this.finished = true;
          }
          this.list = [...this.list, ...res];
          localStorage.setItem("list", JSON.stringify(this.list));
          this.loading = false;
        }
      });
    },
    showDesc(id) {
      this.$router.push({
        path: "/detail",
        query: {
          id: id,
          name: this.sName,
          list: this.list,
          page: this.page,
        },
      });
    },

    goBack() {
      this.$router.push({ path: "/search" });
    },
    search() {
      this.isHasRes = false;
      this.isListShow = false;
      this.$refs["input"].focus();
      this.initData();
    },
  },
  mounted() {
    this.histlist = JSON.parse(localStorage.getItem("histlist"));
    let list = JSON.parse(localStorage.getItem("list"));
    if (list) {
      this.list = list;
    } else {
      this.initData();
    }
    if (this.$route.query.name) {
      this.sName = this.$route.query.name;
    }
    if (this.$route.query.start) {
      this.page = this.$route.query.start;
    }
  },
};
</script>

<style lang="less" scoped>
@searchfC: #666;
@bgColor: #e6e6e6;
.form {
  padding-top: 47px;
}
.van-icon {
  font-size: 16px;
  margin-top: 15px;
}
.search {
  .search-inp {
    font-size: 14px;
    color: @searchfC;
    background-color: @bgColor;
  }
}
.text {
  font-size: 16px;
  margin: 6px 6px 0 0;
  color: #aaa9a9;
}
.rlist {
  width: 100%;
  height: 100%;
  .content-box {
    padding: 10px;
    ul {
      padding-top: 10px;
      li {
        margin-bottom: 20px;
      }
    }
  }
}
.resItem {
  display: flex;
  margin-bottom: 20px;
  img {
    width: 100px;
  }
  > div {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 15px 0 0 15px;
    h4 {
      font-size: 18px;
    }
    p {
      font-size: 14px;
    }
  }
}
</style>